<template>
  <div id="emsHeader">
    <Row type="flex" justify="center" align="middle">
      <Col span="10">
        <div class="emsHeader-left">
          <span class="emsHeader-space">空间选择</span>
          <Cascader :data="spaceList" v-model="valueList" change-on-select @on-change="changeWorkSpace" style="width: 300px;" :clearable="false"></Cascader>
        </div>
      </Col>
      <Col span="10" style="display: flex;align-items: center;justify-content: center;">
        <ems-date
          :isTimeFlag="isTimeFlag"
          ref="emsDate"
          :datePicker="datePicker"
          @dayClick="dayClick"
          @monthClick="monthClick"
          @yearClick="yearClick">
        </ems-date>
        <ems-btn @changeBtn="tapBtn" :btnText="btnText" :activeDateBtn="activeDateBtn"></ems-btn>
      </Col>
      <Col span="4" style="display: flex;justify-content: flex-end;align-items: center;">
        <!--          <div class="back-home">-->
        <!--            <Icon type="ios-home" title="返回主页" style="cursor: pointer;" @click="backHome"/>-->
        <!--          </div>-->
        <Menu mode="horizontal" class="m-dark-menu" theme="dark" :active-name="3"
              style="background: #00152905;" @on-select="onSelect">
          <Submenu :name="3">
            <template slot="title">
              <div class="div-inline">
                <img class="user-img" style="vertical-align: middle" src="../../assets/mainImages/user.png"/>
              </div>
              <!--                <div class="div-inline">-->
              <!--                  <p>&nbsp; {{user}}</p>-->
              <!--                </div>-->
            </template>
            <MenuItem name="goLight" class="select">浅色版本</MenuItem>
            <MenuItem name="goIdefined" class="select">自定义</MenuItem>
            <MenuItem name="logout" class="select">退出登录</MenuItem>
          </Submenu>
        </Menu>
      </Col>
    </Row>
  </div>
</template>

<script>
  import EmsDate from '@/components/common/emsDate'
  import EmsBtn from './emsBtn'
  // import {mapState, mapActions} from 'vuex'
  export default {
    // 组件的名称
    name: 'emsHeader',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {
      // 空间架构的数组
      spaceList: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 空间架构选中的value 数组
      valueList: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 几时 是否显示
      isTimeFlag: {
        type: Boolean,
        default: true
      },
      // 时间输入框的值
      datePicker: {
        type: String,
        default: ''
      },
      // 今日,本月,今年
      btnText: {
        type: Array,
        default: () => {
          return []
        }
      },
      activeDateBtn: {
        type: String,
        default: ''
      }
    },
    // 数据绑定
    data () {
      return {}
    },
    // 组件
    components: {EmsBtn, EmsDate},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {
      // 右侧菜单 选择方法
      onSelect (selectItem) {
        this.$emit('onSelect', selectItem)
      },
      // 返回主页
      // backHome () {
      //   this.$router.push({path: '/display'})
      // },
      /*
        8月 26日 新需求
      * */
      changeWorkSpace (workSpace, selectedData) {
        this.$emit('changeWorkSpace', workSpace, selectedData)
      },
      dayClick () {
        let param = this.$refs.emsDate.year + '-' + this.$refs.emsDate.month + '-' + this.$refs.emsDate.day
        this.$emit('dayClick', param)
      },
      monthClick () {
        let param = this.$refs.emsDate.year + '-' + this.$refs.emsDate.month
        this.$emit('monthClick', param)
      },
      yearClick () {
        let param = this.$refs.emsDate.year
        this.$emit('yearClick', param)
      },
      tapBtn (prop) {
        this.$emit('tapBtn', prop)
      }
    },
    // 计算属性
    computed: {
      // ...mapState('user', {
      //   user: state => state.user
      // })
    },
    // 监听
    watch: {
      // 监听路由变化
    },
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
    }
  }
</script>

<style lang="scss">
  #emsHeader {
    color: $font-f;
    padding-top: 26px;
    .ivu-menu-dark {
      background-color: rgba(0, 21, 41, 0.02);
    }
    div.div-inline {
      display: inline-block;
    }
    .emsHeader-left {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text-align: right;
      span.emsHeader-space {
        @include ems-border;
        width: 80px;
        height: 40px;
        line-height: 36px;
        text-align: center;
        border-right: 0;
        font-size: 14px;
      }
    }
    .ivu-menu-submenu-title span > i, .ivu-menu-submenu-title > i {
      font-size: 20px;
      margin-bottom: 4px;
      display: none;
    }
    .ivu-menu-horizontal .ivu-menu-submenu {
      padding: 0;
    }
    .ivu-cascader-arrow {
      color: $font-f;
    }
    .m-dark-menu .ivu-select-dropdown {
      background: $color-4c9;
    }
    .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item {
      color: $font-f;
    }
    .m-dark-menu .ivu-select-dropdown .ivu-menu-item:hover {
      background-color: $color-126 !important;
    }
    .ivu-cascader .ivu-input, .ivu-date-picker .ivu-input {
      background-color: $color-146;
      @include ems-border;
      border-radius: 0;
      color: #fff;
      font-size: 18px;
      height: 40px;
      line-height: 1.5;
      padding: 4px 15px;
    }
    .ivu-input:focus {
      @include date-border;
    }
    .ivu-select-dropdown {
      background-color: $color-146;
      @include ems-border(1);
    }
    .ivu-select-dropdown .ivu-cascader-menu {
      border-right: 1px solid $color-126;
    }
    .ivu-cascader .ivu-cascader-menu>.ivu-cascader-menu-item:hover, .ivu-select-dropdown .ivu-cascader-menu-item-active {
      background-color: $color-126 !important;
    }
    .ivu-select-dropdown .ivu-cascader-menu-item {
      color: $font-f;
    }
  }
</style>
